<template>
  <el-card
    class="decoration-container"
    v-loading="loading"
    :element-loading-text="loadinText"
  >
    <el-tabs type="card" @tab-click="changeTab" v-model="activeName">
      <el-tab-pane label="一级资质" name="first" class="firstDecoration">
        <el-table
          height="650"
          :data="firstDecorationList"
          type="border-card"
          style="width: 100%"
          v-loading="loading"
          :element-loading-text="loadinText"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item label="申请人名称">
                  <span>{{ props.row.apply_for }}</span>
                </el-form-item>
                <el-form-item label="信用代码">
                  <span>{{ props.row.code }}</span>
                </el-form-item>
                <el-form-item label="承式等级">
                  <span>{{ props.row.cs_grade }}</span>
                </el-form-item>
                <el-form-item label="承修等级">
                  <span>{{ props.row.cx_grade }}</span>
                </el-form-item>
                <el-form-item label="承装等级">
                  <span>{{ props.row.cz_grade }}</span>
                </el-form-item>
                <el-form-item label="许可证核发日期">
                  <span>{{ props.row.date }}</span>
                </el-form-item>
                <el-form-item label="有效到期日期">
                  <span>{{ props.row.end_date }}</span>
                </el-form-item>
                <el-form-item label="许可证编号">
                  <span>{{ props.row.number }}</span>
                </el-form-item>
                <el-form-item label="有效起始日期">
                  <span>{{ props.row.start_date }}</span>
                </el-form-item>
                <el-form-item label="许可证书状态">
                  <span>{{ props.row.status }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="cname" label="公司名称"> </el-table-column>
          <el-table-column
            prop="end_date"
            label="有效到期日期"
          ></el-table-column>
          <template slot="empty">
            <el-empty description="暂无资质"></el-empty>
          </template>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="二级资质" name="second" class="secondDecoration">
        <el-table
          height="650"
          :data="secondDecorationList"
          type="border-card"
          style="width: 100%"
          v-loading="loading"
          :element-loading-text="loadinText"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item label="申请人名称">
                  <span>{{ props.row.apply_for }}</span>
                </el-form-item>
                <el-form-item label="信用代码">
                  <span>{{ props.row.code }}</span>
                </el-form-item>
                <el-form-item label="承式等级">
                  <span>{{ props.row.cs_grade }}</span>
                </el-form-item>
                <el-form-item label="承修等级">
                  <span>{{ props.row.cx_grade }}</span>
                </el-form-item>
                <el-form-item label="承装等级">
                  <span>{{ props.row.cz_grade }}</span>
                </el-form-item>
                <el-form-item label="许可证核发日期">
                  <span>{{ props.row.date }}</span>
                </el-form-item>
                <el-form-item label="有效到期日期">
                  <span>{{ props.row.end_date }}</span>
                </el-form-item>
                <el-form-item label="许可证编号">
                  <span>{{ props.row.number }}</span>
                </el-form-item>
                <el-form-item label="有效起始日期">
                  <span>{{ props.row.start_date }}</span>
                </el-form-item>
                <el-form-item label="许可证书状态">
                  <span>{{ props.row.status }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="cname" label="公司名称"> </el-table-column>
          <el-table-column
            prop="end_date"
            label="有效到期日期"
          ></el-table-column>
          <template slot="empty">
            <el-empty description="暂无资质"></el-empty>
          </template>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="三级资质" name="third" class="thirdDecoration">
        <el-table
          height="650"
          :data="thirdDecorationList"
          type="border-card"
          style="width: 100%"
          v-loading="loading"
          :element-loading-text="loadinText"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item label="申请人名称">
                  <span>{{ props.row.apply_for }}</span>
                </el-form-item>
                <el-form-item label="信用代码">
                  <span>{{ props.row.code }}</span>
                </el-form-item>
                <el-form-item label="承式等级">
                  <span>{{ props.row.cs_grade }}</span>
                </el-form-item>
                <el-form-item label="承修等级">
                  <span>{{ props.row.cx_grade }}</span>
                </el-form-item>
                <el-form-item label="承装等级">
                  <span>{{ props.row.cz_grade }}</span>
                </el-form-item>
                <el-form-item label="许可证核发日期">
                  <span>{{ props.row.date }}</span>
                </el-form-item>
                <el-form-item label="有效到期日期">
                  <span>{{ props.row.end_date }}</span>
                </el-form-item>
                <el-form-item label="许可证编号">
                  <span>{{ props.row.number }}</span>
                </el-form-item>
                <el-form-item label="有效起始日期">
                  <span>{{ props.row.start_date }}</span>
                </el-form-item>
                <el-form-item label="许可证书状态">
                  <span>{{ props.row.status }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="cname" label="公司名称"> </el-table-column>
          <el-table-column
            prop="end_date"
            label="有效到期日期"
          ></el-table-column>
          <template slot="empty">
            <el-empty description="暂无资质"></el-empty>
          </template>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="四级资质" name="fourth" class="fourthDecoration">
        <el-table
          height="650"
          :data="fourthDecorationList"
          type="border-card"
          style="width: 100%"
          v-loading="loading"
          :element-loading-text="loadinText"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item label="申请人名称">
                  <span>{{ props.row.apply_for }}</span>
                </el-form-item>
                <el-form-item label="信用代码">
                  <span>{{ props.row.code }}</span>
                </el-form-item>
                <el-form-item label="承式等级">
                  <span>{{ props.row.cs_grade }}</span>
                </el-form-item>
                <el-form-item label="承修等级">
                  <span>{{ props.row.cx_grade }}</span>
                </el-form-item>
                <el-form-item label="承装等级">
                  <span>{{ props.row.cz_grade }}</span>
                </el-form-item>
                <el-form-item label="许可证核发日期">
                  <span>{{ props.row.date }}</span>
                </el-form-item>
                <el-form-item label="有效到期日期">
                  <span>{{ props.row.end_date }}</span>
                </el-form-item>
                <el-form-item label="许可证编号">
                  <span>{{ props.row.number }}</span>
                </el-form-item>
                <el-form-item label="有效起始日期">
                  <span>{{ props.row.start_date }}</span>
                </el-form-item>
                <el-form-item label="许可证书状态">
                  <span>{{ props.row.status }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="cname" label="公司名称"> </el-table-column>
          <el-table-column
            prop="end_date"
            label="有效到期日期"
          ></el-table-column>
          <template slot="empty">
            <el-empty description="暂无资质"></el-empty>
          </template>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="五级资质" name="fifth" class="fifthDecoration">
        <el-table
          height="650"
          :data="fifthDecorationList"
          type="border-card"
          style="width: 100%"
          v-loading="loading"
          :element-loading-text="loadinText"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item label="申请人名称">
                  <span>{{ props.row.apply_for }}</span>
                </el-form-item>
                <el-form-item label="信用代码">
                  <span>{{ props.row.code }}</span>
                </el-form-item>
                <el-form-item label="承式等级">
                  <span>{{ props.row.cs_grade }}</span>
                </el-form-item>
                <el-form-item label="承修等级">
                  <span>{{ props.row.cx_grade }}</span>
                </el-form-item>
                <el-form-item label="承装等级">
                  <span>{{ props.row.cz_grade }}</span>
                </el-form-item>
                <el-form-item label="许可证核发日期">
                  <span>{{ props.row.date }}</span>
                </el-form-item>
                <el-form-item label="有效到期日期">
                  <span>{{ props.row.end_date }}</span>
                </el-form-item>
                <el-form-item label="许可证编号">
                  <span>{{ props.row.number }}</span>
                </el-form-item>
                <el-form-item label="有效起始日期">
                  <span>{{ props.row.start_date }}</span>
                </el-form-item>
                <el-form-item label="许可证书状态">
                  <span>{{ props.row.status }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="cname" label="公司名称"> </el-table-column>
          <el-table-column
            prop="end_date"
            label="有效到期日期"
          ></el-table-column>
          <template slot="empty">
            <el-empty description="暂无资质"></el-empty>
          </template>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 分页组件 -->
    <div style="height: 60px; margin-top: 19px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[15, 30, 40]"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import {
  getFirstDecorationListApi,
  getSecondDecorationListApi,
  getThirdDecorationListApi,
  getFourthDecorationListApi,
  getFifthDecorationListApi
} from '@/api/qualifications'
export default {
  name: 'decoration-page',
  created () {
    this.roleid = localStorage.getItem('crm-roleid')
    this.getFirstDecorationList()
  },
  data () {
    return {
      roleid: 0,
      loading: false,
      loadinText: '',
      page: 1,
      page_size: 15,
      total: 0,
      activeName: 'first',
      // 一级承装修试资质
      firstDecorationList: [],
      // 二级承装修试资质
      secondDecorationList: [],
      // 三级承装修试资质
      thirdDecorationList: [],
      // 四级承装修试资质
      fourthDecorationList: [],
      // 五级承装修试资质
      fifthDecorationList: []
    }
  },
  methods: {
    // 获取 一级承装修试资质
    async getFirstDecorationList () {
      // this.loading = true
      this.loadinText = '数据正在加载中!'
      const { data: res } = await getFirstDecorationListApi(
        this.page,
        this.page_size
      )
      // console.log('获取 承装修试 一级承装修试资质', res)
      this.firstDecorationList = [...res.data.lists]
      this.total = res.data.num
      this.loading = false
      this.loadinText = ''
    },
    // 获取 二级承装修试资质
    async getSecondDecorationList () {
      this.loading = true
      this.loadinText = '数据正在加载中!'
      const { data: res } = await getSecondDecorationListApi(
        this.page,
        this.page_size
      )
      // console.log('获取 承装修试 二级承装修试资质', res)
      this.secondDecorationList = [...res.data.lists]
      this.total = res.data.num
      this.loading = false
      this.loadinText = ''
    },
    // 获取 三级承装修试资质
    async getThirdDecorationList () {
      this.loading = true
      this.loadinText = '数据正在加载中!'
      const { data: res } = await getThirdDecorationListApi(
        this.page,
        this.page_size
      )
      // console.log('获取 三级承装修试资质', res)
      this.thirdDecorationList = [...res.data.lists]
      this.total = res.data.num
      this.loading = false
      this.loadinText = ''
    },
    // 获取 四级承装修试资质
    async getFourthDecorationList () {
      this.loading = true
      this.loadinText = '数据正在加载中!'
      const { data: res } = await getFourthDecorationListApi(
        this.page,
        this.page_size
      )
      // console.log('获取 承装修试 四级承装修试资质', res)
      this.fourthDecorationList = [...res.data.lists]
      this.total = res.data.num
      this.loading = false
      this.loadinText = ''
    },
    // 获取 五级承装修试资质
    async getFifthDecorationList () {
      this.loading = true
      this.loadinText = '数据正在加载中!'
      const { data: res } = await getFifthDecorationListApi(
        this.page,
        this.page_size
      )
      // console.log('获取 承装修试 五级承装修试资质', res)
      this.fifthDecorationList = [...res.data.lists]
      this.total = res.data.num
      this.loading = false
      this.loadinText = ''
    },
    // 切换tab栏 重置页码  判断选择的是哪个tab栏
    changeTab () {
      this.page = 1
      this.page_size = 15
      this.total = 0
      this.activeNameChange()
    },
    // 切换第几页
    handleCurrentChange (val) {
      this.page = val
      this.activeNameChange()
    },
    // 手动更改页码
    handleSizeChange (val) {
      this.page_size = val
      this.activeNameChange()
    },
    // 判断哪个tab栏被选中
    activeNameChange () {
      if (this.activeName === 'first') {
        // console.log('获取 一级施工资质')
        this.getFirstDecorationList()
      } else if (this.activeName === 'second') {
        // console.log('获取 二级施工资质')
        this.getSecondDecorationList()
      } else if (this.activeName === 'third') {
        // console.log('获取 三级施工资质')
        this.getThirdDecorationList()
      } else if (this.activeName === 'fourth') {
        // console.log('获取 四级施工资质')
        this.getFourthDecorationList()
      } else if (this.activeName === 'fifth') {
        // console.log('获取 五级施工资质')
        this.getFifthDecorationList()
      }
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.decoration-container {
  box-sizing: border-box;
  height: 837px;
  padding: 25px 40px 0px;
  // background-color: pink;
  .el-tabs {
    .el-tabs__item.is-active {
      background-color: #f5f7fa;
    }
    .el-form {
      display: flex;
      flex-wrap: wrap;
      .el-form-item {
        width: 50%;
      }
    }
  }
}
</style>

<style>
/* 表格展开 效果 */
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
